<template>
  <div id="app">
    <!-- 其他内容 -->
    <div class="indexHeader">
      <van-space class="van_spaces">
        <van-image width="18" height="21" :src="src_dz" />
        <div class="white">郑州市·美景天城</div>
        <van-icon name="arrow-down" color="#fff" />
      </van-space>
      <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="搜索感兴趣的商品"
        @search="onSearch"
      />
      <van-swipe
        :autoplay="3000"
        :show-indicators="false"
        lazy-render
        class="van-swipes"
      >
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" class="bannerImg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="daohang">
      <van-row class="list">
        <van-col span="6">
          <img src="../../assets/image/home/qiandao.png" class="imgs" />
          <div>每日签到</div>
        </van-col>
        <van-col span="6">
          <img src="../../assets/image/home/duihuan.png" class="imgs" />
          <div>礼品兑换</div>
        </van-col>
        <van-col span="6">
          <img src="../../assets/image/home/youhuiquan.png" class="imgs" />
          <div>优惠券</div>
        </van-col>
        <van-col span="6">
          <img src="../../assets/image/home/zhibo.png" class="imgs" />
          <div>不见不散</div>
        </van-col>
      </van-row>
    </div>
    <van-notice-bar
      class="van-notice-bar"
      :left-icon="noticeImg"
      :scrollable="false"
      background="#fff"
      color="#333"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
      >
        <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
        <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
        <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <div class="remen">
      <van-row justify="center" align="center" class="new_actives">
        <div class="line"></div>
        <div class="wenzi">热门商品</div>
        <div class="line right"></div>
      </van-row>
    </div>
    <div class="renmenList">
      <van-card
        v-for="(item, index) in 3"
        :key="index"
        price="2.00"
        desc="累计销量1000+"
        title="【热卖商品】加厚磨毛四件套不负睡眠好时光"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      >
        <template #footer>
          <van-button
            size="small"
            icon="cart-o"
            type="success"
            :round="true"
          ></van-button>
        </template>
      </van-card>
    </div>
    <div style="height: 50px"></div>
    <BottomNav />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  import { handleViteImages } from "@/utils/imgSrc";
  import BottomNav from "./../../components/Tabbar/index.vue";
  import { Toast, ToastOptions } from "vant";
  export default defineComponent({
    components: {
      BottomNav,
    },
    setup() {
      const src_dz = handleViteImages("home/addressicon.png", "home");
      const noticeImg = handleViteImages("home/notice.png", "home");
      const value = ref("");
      const onSearch = (val: string | ToastOptions | undefined) => Toast(val);
      const images = [
        "src/assets/image/home/banner.png",
        "src/assets/image/home/banner.png",
      ];
      return {
        src_dz,
        value,
        onSearch,
        images,
        noticeImg,
      };
    },
  });
</script>
<style lang="less">
  body {
    background: #f7f7f7;
  }
  :root {
    --van-card-background-color: var(--van-white);
    --van-font-weight-bold: 600;
    --van-card-title-line-height: 1.4;
    --van-button-icon-size: 1.3em;
  }
  .van-card__title {
    font-size: 14px;
    max-height: 11vw;
  }
  .van-card__footer {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .renmenList {
    margin: 15px;
  }
  .indexHeader {
    background: url("../../assets/image/home/indexbg.png") no-repeat;
    background-size: 100% 100%;
    height: 220px;
    width: 100%;
    padding: 0;
    .white {
      color: #fff;
    }
    .van_spaces {
      padding: 30px 16px 6px;
    }
    .bannerImg {
      width: 100%;
      height: 150px;
    }
    .van-swipes {
      margin: 10px 15px;
    }
  }
  .van-notice-bar {
    margin: 15px 10px;
    .notice-swipe {
      height: 40px;
      line-height: 40px;
    }
  }
  .daohang {
    .list {
      padding: 0px 16px;
      margin-top: 60px;
      text-align: center;
    }
    .imgs {
      width: 50px;
      height: 50px;
    }
    div {
      font-size: 13px;
    }
  }
  .new_actives {
    height: 30px;
    margin-bottom: 0px;
    font-weight: bold;
    color: #212121;
    position: relative;
    .wenzi {
      font-size: 24px;
      margin: 0 5px;
      font-family: cursive;
      background-image: -webkit-linear-gradient(left, #212121, #212121);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .line {
      width: 50px;
      height: 2px;
      background: linear-gradient(to right, #212121, #fff);
    }
    .line.right {
      background: linear-gradient(to left, #212121, #fff);
    }
  }
</style>
